<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>
	<head>
		<title>Result Search</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
		<!-- Bootstrap Core CSS -->
    	<link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>
		<link href="<c:url value="/resources/style/style.css"/>" rel = "stylesheet"></link>
		<link href="<c:url value="/resources/themes/jquery-ui.css"/>" rel="stylesheet"></link>
		<link rel="stylesheet" href="<c:url value="/resources/style/bootstrap-multiselect.css"/>" type="text/css"></link>
		<!-- simple search css -->
		<link rel="stylesheet" href="<c:url value="/resources/style/common.css"/>" type="text/css"></link>
		<!-- /simple search css -->
	</head>
	<body>
		<%@ include file="/WEB-INF/pages/sessionvariable.jsp" %>
		<%@ include file="/WEB-INF/pages/topnavigation.jsp" %>
		<%@ include file="/WEB-INF/pages/simplesearch.jsp" %>
    	<%@ include file="/WEB-INF/pages/searchform.jsp" %>
    	<input type="hidden" name="isOpen" value="<%= session.getAttribute( "isOpen" ) %>" id="isOpenValue"/>
		<c:if test="${not empty listRooms}">
		  	<div class="container living_panel_bottom_top">
		  		<div class="panel panel-default happyhome_panel_border">
				  	<div class="panel-heading living_transparent_color living_font_size_header">
				    	<h3 class="panel-title"><a href="resultProperty?categoryCode=ALL&pageSize=6&page=1">New property</a></h3>
				  	</div>
			  		<div class="panel-body">
			  			<c:forEach var="property" items="${listRooms }" varStatus="counter">
					   		<c:choose>
					    		<c:when test="${counter.count %2 != 0 && counter.count == fn:length(listRooms)}">
					    			<div class="row">
					    				<div class="col-md-6 col-sm-6 col-xs-12 happyhome_padding_product">
											<div class="panel panel-default living_boder_radius_shadow living_panel_bottom_top">
												<div class="panel-body">
													<div class="col-md-6 living_product_xs_device">
														<a href="productDetail?aId=${property.idRoom}&type=ROOMS">
														<div class="living_panel_bottom_top">
															<img src="${pageContext.request.contextPath}/${property.url }" class="img-responsive" style="height: 140px;"/>
														</div>
														</a>
													</div>
													<div class="col-md-6 living_product_xs_device living_product_font_size_line_height">
														<div class="row living_margin_left_right">
															<spring:message code="floor" text="Floor" />:
															${property.floor}
														</div>
														<div class="row living_margin_left_right">Sqft: ${property.sqft} m<sup>2</sup></div>
														<div class="row living_margin_left_right">
															<spring:message code="numberPerson" text="NumberPerson" />:
															${property.numberMaxPerson}
														</div>
														<div class="row living_margin_left_right">Price: 
															<div class="special_mark">${property.priceRoomValue}</div>
														</div>
														<div class="row living_margin_left_right happyhome_margin_top">
															<div id="characteristic_favorite" onclick="addToFavorite(${property.idRoom })">
																<img src="<c:url value="/resources/images/favorite.jpg"/>" style="height:20px;"/> &nbsp;Add favorites
															</div>
														</div>
													</div>
													<div class="col-md-12 living_margin_left_right">
														<a href="productDetail/${property.idRoom }">
															<div id="address_detail">${property.homeValue }</div>
														</a>
														<div id="address">Address: ${property.address }</div>
													</div>
												</div>
											</div>
										</div><!-- / col-md-6-->
									</div>
					    		</c:when>
					    		<c:when test="${counter.count %2 != 0}">
					    			<div class="row">
					    				<div class="col-md-6 col-sm-6 col-xs-12 happyhome_padding_product">
											<div class="panel panel-default living_boder_radius_shadow living_panel_bottom_top">
												<div class="panel-body">
													<div class="col-md-6 living_product_xs_device">
														<a href="productDetail?aId=${property.idRoom}&type=ROOMS">
															<div class="living_panel_bottom_top">
																<img src="${pageContext.request.contextPath}/${property.url }" class="img-responsive" style="height: 140px;" />
															</div>
														</a>
													</div>
													<div class="col-md-6 living_product_xs_device living_product_font_size_line_height">
														<div class="row living_margin_left_right">
															<spring:message code="floor" text="Floor" />:
															${property.floor}
														</div>
														<div class="row living_margin_left_right">Sqft: ${property.sqft} m<sup>2</sup></div>
														<div class="row living_margin_left_right">
															<spring:message code="numberPerson" text="NumberPerson" />:
															${property.numberMaxPerson}
														</div>
														<div class="row living_margin_left_right">Price: 
															<div id="special_mark" class="special_mark">${property.priceRoomValue}</div>
														</div>
														<div class="row living_margin_left_right happyhome_margin_top">
															<div id="characteristic_favorite" onclick="addToFavorite(${property.idRoom })">
																<img src="<c:url value="/resources/images/favorite.jpg"/>" style="height:20px;"/> &nbsp;Add favorites
															</div>
														</div>
													</div>
													<div class="col-md-12 living_margin_left_right">
														<a href="productDetail/${property.idRoom }">
															<div id="address_detail">${property.homeValue }</div>
														</a>
														<div id="address">Address: ${property.address }</div>
													</div>
												</div>
											</div>
										</div><!-- /col-md-6 -->
					  	<!-- /row </div> row -->
					    		</c:when>
					    		<c:otherwise>
					    				<!-- <div class="row"> -->
					    				<div class="col-md-6 col-sm-6 col-xs-12 happyhome_padding_product">
											<div class="panel panel-default living_boder_radius_shadow living_panel_bottom_top">
												<div class="panel-body">
													<div class="col-md-6 living_product_xs_device">
														<a href="productDetail?aId=${property.idRoom}&type=ROOMS">
															<div class="living_panel_bottom_top">
																<img src="${pageContext.request.contextPath}/${property.url }" class="img-responsive" style="height: 140px;"/>
															</div>
														</a>
													</div>
													<div class="col-md-6 living_product_xs_device living_product_font_size_line_height">
														<div class="row living_margin_left_right">
															<spring:message code="floor" text="Floor" />:
															${property.floor}
														</div>
														<div class="row living_margin_left_right">Sqft: ${property.sqft} m<sup>2</sup></div>
														<div class="row living_margin_left_right">
															<spring:message code="numberPerson" text="NumberPerson" />:
															${property.numberMaxPerson}
														</div>
														<div class="row living_margin_left_right">Price: 
															<div id="special_mark" class="special_mark">${property.priceRoomValue}</div>
														</div>
														<div class="row living_margin_left_right happyhome_margin_top">
															<div id="characteristic_favorite" onclick="addToFavorite(${property.idRoom })">
																<img src="<c:url value="/resources/images/favorite.jpg"/>" style="height:20px;"/> &nbsp;Add favorites
															</div>
														</div>
													</div>
													<div class="col-md-12 living_margin_left_right">
														<a href="productDetail/${property.idRoom }">
															<div id="address_detail">${property.homeValue }</div>
														</a>
														<div id="address">Address: ${property.address }</div>
													</div>
												</div>
											</div>
										</div><!-- /col-md-6 -->
									</div><!-- /div row -->
					    		</c:otherwise>
					    	</c:choose>
					    </c:forEach>
					    <div class="row pull-right living_margin_left_right"><a href="resultProperty?categoryCode=ALL&pageSize=6&page=1">More...</a></div>
					</div><!-- /panel-body -->
				</div><!-- / panel panel-default -->
			</div><!-- /container -->
		</c:if><!-- new properties -->
	
		<!-- Customer's opinion -->
		<div class="container living_panel_bottom_top">
	  		<div class="panel panel-default">
			  	<div class="panel-heading living_transparent_color living_font_size_header">
			    	<h3 class="panel-title" style="text-align: center;font-family: HLT Motion Picture,serif !important;">Ý kiến của khách hàng dành tặng happy homes</h3>
			  	</div>
		  		<div class="panel-body">
		  			<c:if test="${not empty listOpinion}">
	          			<!-- carousel -->
	            		<div id="myCarousel1" class="carousel slide" data-ride="carousel">
	            			<!-- Indicators -->
						  	<ol class="carousel-indicators">
					  			<c:forEach items="${listOpinion }" varStatus="countIndicator">
									<li data-target="#myCarousel1" data-slide-to="${countIndicator.count -1}"></li>	    
								</c:forEach>
						  	</ol>
						  	<div class="carousel-inner">
						  			<c:forEach var="property" items="${listOpinion }" varStatus="counter">
						  				<c:choose>
						  					<c:when test="${counter.count == 1}">
										    	<div class="item active">
										    	  <div class="col-md-2">
										  		  	<img alt="${property.url}" src="${property.url}" class="img-responsive living_image_hot_properties col-md-12" style="height:100px; margin-top:5px;"/>
										  		  	<div class="col-md-12" style="text-align: center;">${property.author }</div>
										    	  </div>
												  <div class="container">
														<div class="carousel-caption">
													  		<h4>${property.content}</h4>
														</div>
												  </div>
												</div>
											</c:when>
											<c:otherwise>
												<div class="item">
											  		<div class="col-md-2">
											  		  	<img alt="${property.url}" src="${property.url}" class="img-responsive living_image_hot_properties col-md-12" style="height:100px; margin-top:5px;"/>
											  		  	<div class="col-md-12" style="text-align: center;">${property.author }</div>
											    	</div>
												  	<div class="container">
														<div class="carousel-caption">
														  	<h4>${property.content}</h4>
														</div>
												  	</div>
												</div>
											</c:otherwise>
									    </c:choose>
									</c:forEach>
							  </div>
							  <a class="left carousel-control" href="#myCarousel1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
			  				  <a class="right carousel-control" href="#myCarousel1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	            		</div>
						<!-- /carousel -->
					</c:if>
		  		</div>
		  	</div>
		</div>
		<!-- /Customer's opinion -->
		<!-- like facebook component -->
		<div class="container">
	      <div id="likeFaceBookComponent">
	      </div>
	    </div>
	    <!-- /like facebook component -->
		
		<!-- backToTop icon -->
		<a href="#" id="backToTop" class="backToTop">
			<img src="<c:url value="/resources/images/top.png"/>"/> 
		</a>
		<!-- /backToTop icon -->
		<!-- jQuery Version 1.11.0 -->
    	<script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
		<!-- Bootstrap Core JavaScript -->
    	<script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
    
    	<!-- multiple select -->
	    <script type="text/javascript" src="<c:url value="/resources/admin/js/bootstrap-multiselect.js"/>"></script>
		<!-- /multiple select -->
		<!-- range slider -->
	  	<script src="<c:url value="/resources/themes/jquery-ui/jquery-ui.js"/>"></script>
	  	<!-- /range slider -->
	  	<!-- common javascript -->
	  	<script src="<c:url value="/resources/js/common.js"/>"></script>
	  	<!-- / common javascript -->
	</body>
</html>